<template>
    <div class="list">
        <div class="header">
            明细<span @click="emitUnShow">×</span>
        </div>
        <div class="container">
            <div class="flex">
                <div>订单原总价</div>
                <div><span>￥</span>{{ preTotal }}</div>
            </div>
            <div class="flex grey">
                <div>商品总价</div>
                <div><span>￥</span>{{ pre_total_price }}</div>
            </div>
            <div class="flex grey">
                <div>打包费</div>
                <div><span>￥</span>{{ packCharge }}</div>
            </div>
            <div class="flex">
                <div>商品优惠</div>
                <div class="red"><span class="decrease">-</span><span class="symbol">￥</span>{{ welfarePrice }}</div>
            </div>
            <div class="flex">
                <div>合计</div>
                <div><span>￥</span>{{ total_price }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { computed, inject, ref, toRaw, toRef } from 'vue';
export default {
    name:'Detail',
    props:['total_price','pre_total_price','packCharge'],
    setup(props,{emit}){
        let preTotal = computed(()=>{
            return Number(props.pre_total_price)+props.packCharge
        })
        let welfarePrice = computed(()=>{
            return (props.pre_total_price-props.total_price+props.packCharge).toFixed(2)
        })
        console.log("优惠",welfarePrice)

        //点击×号,取消细明弹窗
        function emitUnShow(){
            emit('unShow')
        }

        return { emitUnShow,preTotal,welfarePrice}
    }
}
</script>

<style scoped>
    .list {
        border-radius: 8px;
        position:fixed;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%,50%);
        width: 35%;
        height: 60%;
        border-radius: 10px;
        background-color: white;
    }
    .header {
        text-align: center;
        padding-bottom: 1%;
        border-bottom: 1px solid rgb(204, 201, 201);
    }
    .header span {
        float: right;
        margin-right: 20px;
        color: rgb(185, 179, 179);
    }
    .flex {
        display: flex;
        justify-content: space-between;
        margin: 20px;
    }
    .symbol {
        font-size: 8px;
    }
    .grey {
        color: grey;
        font-size: 11px;
    }
    .red {
        color: red;
    }
    .decrease {
        font-size: 15px;
    }
</style>